<template>
  <u-cell :title="title" :value="name" :style="{width: width}" :border="border"/>
</template>

<script>
import { getOrganization } from '@/api/system/organization'

export default {
  name: 'SystemOrganizationCell',
  props: {
    modelValue: {
      type: String,
      default: undefined
    },
    title: {
      type: String,
      default: '所属机构'
    },
    width: {
      type: String,
      default: '100%'
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: undefined
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler() {
        this.getOrganizationInfo()
      }
    }
  },
  methods: {
    getOrganizationInfo() {
      this.name = undefined
      if (this.isNull(this.modelValue)) {
        return
      }
      getOrganization(this.modelValue).then((response) => {
        if (response.data.success) {
          this.name = response.data.data.name
        }
      })
    }
  }
}
</script>
